<template>
  <div class="abbey">
    <ul>
      <li v-for="(item, index) in list" :key="index">{{index}}: {{item}}</li>
    </ul>
    <ul>
      <li v-for="(item, index) in filterArr(songs)" :key="index">{{index}}:{{item}}</li>
    </ul>
    <h1>{{num}}:{{one}}</h1>
    <button @click="jumpToHomePage">SGT{{msg}}</button>
    <!-- <ImgLi :imgs="imgs"></ImgLi> -->
    <myInput :value='msg' @input="msg = $event"></myInput>
    <h1>{{msg | capitalize}}</h1>
    <!-- <Blog v-for="(blog, index) in blogs" :blog="blog" :key="index"></Blog> -->
    <Blue v-for="(blue, index) in blues" :blue="blue" :key="index"></Blue>
    <child>
      <img :src="imgs">
    </child>
  </div>
</template>

<script>
import store from '@/store/index'
import img1 from '../assets/beatles.jpg'
import { setInterval } from 'timers'

var child = {
  template: `<div><h1>child</h1><slot></slot></div>`,
  name: 'child'
}
export default {
  name: 'AbbeyRoad',
  store,
  data () {
    return {
      list: {
        1963: 'Please Please Me',
        1964: 'A Hard Day\'s Night',
        1965: 'Rubber Soul'
      },
      songs: ['yesterday', 'something'],
      num: 0 + 3,
      imgs: img1,
      blogs: [
        {title: 'kenan', img: img1, content: 'hello world'},
        {title: 'kenan', img: img1, content: 'hello world'},
        {title: 'kenan', img: img1, content: 'hello world'}
      ],
      msg: 'longloonglong',
      blues: ['john lennon', 'paul maccartney']
    }
  },
  methods: {
    printMsg: function () {
      console.log(this)
    },
    printArrow: () => {
      console.log(this.store)

      // debugger
    },
    jumpToHomePage: function () {
      this.$router.replace('/why')
    },
    getData: function () {
      this.axios.get('http://localhost:8081/api/list').then(res => {
        console.log(res.data)
      })
    },
    filterArr: function (arr) {
      return arr.filter(function (x) {
        return x.includes('g')
      })
    },
    autoAddOne: function () {
      setInterval(() => {
        this.num++
      }, 1000)
    }
  },
  computed: {
    one: {
      get: function () {
        console.log('read')
        return this.num * 10
      },
      set: function () {
        console.log('changed')
      }
    }
  },
  mounted () {
    this.printMsg()
    this.printArrow()
    this.getData()
    // this.autoAddOne()
    setInterval(() => {
      this.num++
      console.log(this)
    }, 1000)
  },
  beforeUpdate () {
    console.log('跟新前')
  },
  updated () {
    console.log('跟新后')
  },
  filters: {
    capitalize: function (value) {
      return value.toUpperCase()
    }
  },
  components: {
    child
  }
}
</script>

<style lang="less" scoped>
.abbey {
  ul {
    li {
      list-style: none;
      text-align: center;
    }
  }
}
</style>
